<template>
	<div id="item-wrapper" class="item-wrapper">
    <div class="style2" v-show="itemList.length > 0 && listStyle">
      <van-list v-model="vanList.loading"
                :finished="vanList.finished"
                :error.sync="vanList.error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div class="item-info-style2 item-info" v-for="(goods,index) in itemList" :key="index">
           <!-- :class="goods.num<=0?'gray':''" -->
          <div class="img-box" @click="linkToDetail(goods)">
            <img class="mian-icon" v-if="goods.if_free_order_item" src="https://img.wifenxiao.com/h5-wfx/images/freeQuentRed.png">
            <div class="img-inner-box">
              <img :src="goods.pic_url+'480x480'" alt="" v-if="goods.is_compress==1">
              <img :src="goods.pic_url" alt="" v-else>
              <div class="item-sold-bg" v-if="goods.num <= 0"></div>
              <div class="item-sold-out" v-if="goods.num <= 0">
                <!-- <img src="@img/item/list/sold_out.png" alt=""> -->
                <span class="em">已售罄</span>
                <!-- <span class="sub">SOLD OUT</span> -->
              </div>
            </div>
          </div>
          <div class="item-info-main" @click="linkToDetail(goods)">
            <div class="title">
              <div
                class="item-tips-app fontZiy"
                v-if="goods.is_self_support == 1">自营</div>{{goods.title}}</div>
            <!-- 秒杀或砍价-->
            <div class="item-timer" v-if="goods.is_miao || goods.is_bargin">
              <span v-if="(goods.start)>nowTime">开始时间：{{goods.start_time}}</span>
              <span v-else>结束时间：{{goods.end_time}}</span>              
            </div>
            <div class="item-tips">
              
              <!--<div class="item-tips-app fontBaoY">包邮</div>-->
              <div
                class="item-tips-app fontBaoSSP"
                v-if="otherInfo.is_open_kuajing==1 && goods.item_config && goods.item_config.kuajing_type==1">保税商品</div>
              <div
                class="item-tips-app fontHaiWZY"
                v-if="otherInfo.is_open_kuajing==1 && goods.item_config && goods.item_config.kuajing_type==2">海外直邮</div>
              <a href="javascript:;" v-if="goods.is_act==1">
                <!-- 以下为不可同时存在活动标签v-else-if -->
                <div
                  class="item-tips-app fontTry"
                  v-if="goods.is_try && goods.is_try == 1">试用</div>
                <div
                  class="item-tips-app fontMiaoS"
                  v-else-if="goods.is_miao && goods.is_miao == 1">{{goods.actives_title}}</div>
                <div
                  class="item-tips-app fontXianSZ"
                  v-else-if="goods.discount && goods.discount!=0
                  && goods.discount != 10
                  && !goods.rank_price
                  && goods.is_limit_discount
                  && goods.is_limit_discount == 1">
                  <!-- 限时{{ goods.discount }}折 -->
                  <span v-if="goods.discount_sta==1">限时 ¥{{goods.discount}}</span>
                  <span v-else>限时{{ goods.discount }}折</span>
                </div>
                <div
                  class="item-tips-app fontKanj"
                  v-else-if="goods.is_bargin && goods.is_bargin == 1">砍价</div>
                <div
                class="item-tips-app fontZhouQG"
                v-else-if="goods.is_cycle && goods.is_cycle == 1">周期购</div>
                <!--<div
                  class="item-tips-app fontPingT">拼团</div>-->
                <div
                  v-else-if="goods.is_packageprice && goods.is_packageprice == 1"
                  class="item-tips-app fontJiXj">{{ goods.package_label }}</div> <!--几选几-->
                <div
                  class="item-tips-app fontTuanG"
                  v-else-if="goods.is_tuan && goods.is_tuan == 1">团购</div>
                <div
                  class="item-tips-app fontXianJiZ"
                  v-else-if="goods.discount && goods.discount!=0 && goods.discount != 10 && !goods.rank_price">{{ goods.discount }}折</div>
                <div
                  class="item-tips-app fontFuGYH"
                  v-else-if="goods.is_repurchase && goods.is_repurchase != 0">复购优惠</div>
                <div
                  class="item-tips-app fontPaiM"
                  v-else-if="goods.is_auction && goods.is_auction != 0">拍卖</div>
              
                <!-- 以下可同时存在活动标签 -->
                <div
                class="item-tips-app fontYuS"
                v-if="goods.is_presale">预售</div>
                <div
                  class="item-tips-app fontXianSG"
                  v-if="goods.is_time_purchase">限时购</div>
                <div
                  class="item-tips-app fontBmd"
                  v-if="goods.is_bmd">多买优惠</div>
              </a>
            </div>
            <div class="level-price"
              v-if="!goods.activity && goods.dhs_item_price && goods.dhs_item_price.dhsGrade">
              <!--<span class="level-icon icon1"></span>-->
              <!--<span class="level-icon icon2"></span>-->
              <!--<span class="level-icon icon3"></span>-->
              <!--<span class="level-icon icon4"></span>-->
              <span class="level-icon">{{goods.dhs_item_price.dhsRank}}</span>
              <div class="price" v-html="scaleGoodsPriceFn(goods.dhs_item_price.priceDhsRank)"></div>
            </div>
            <div v-else-if="goods.up_level_name&&goods.up_discount_price" class="level-price">
              <span class="level-vip-icon">{{'LV'+goods.up_level_name}}</span>
              <div class="price level-vip-price" v-html="scaleGoodsPriceFn(goods.up_discount_price)"></div>
            </div>
            <div class="price-info">
              <div class="left-num">
                <div class="item goods-price">
                  <div v-if="goods.miao_price" class="price" v-html="scaleGoodsPriceFn(goods.miao_price)"></div>
                  <div v-else-if="goods.rank_price" class="price" v-html="scaleGoodsPriceFn(goods.rank_price)"></div>
                  <div v-else-if="dhsOriginalPriceShow != 1" class="price" v-html="scaleGoodsPriceFn(goods.price)"></div>
                  <div v-else class="price" v-html="scaleGoodsPriceFn(goods.o_price)"></div>
                  <del class="origin-price" v-if="otherInfo.is_display_original_price == 1">{{mSymbol.name}}{{ goods.original_price }}</del>
                </div>
                <div class="other-info">
                  <div class="item point" v-if="goods.buy_need_points > 0">+<span>{{ goods.buy_need_points }}</span><span>{{otherInfo.cash_point_name || otherInfo.point_name}}</span></div>
                  
                  <!--赚多少-->
                  <div class="item pre_commission" v-if="goods.pre_commission > 0">
                    <span class="txt">{{otherInfo.earn_alias}}</span>
                    <span class="price"><i>{{mSymbol.name}}</i><span>{{ goods.pre_commission }}</span></span>
                  </div>
                  <div class="item sales-info" v-if="goods.sale_num !== false">已售{{ goods.sale_num }}件</div>
                </div>
              </div>
              <!-- <div v-if="!goods.is_try && !goods.is_miao && !goods.is_bargin && !goods.is_crowd && !goods.is_limit_discount && !goods.is_try && !goods.is_auction" class="shop-car" @click="handleOpenSkuDialog(goods)">
              </div>
              <div v-else class="shop-car" @click="linkToDetail(goods)"></div> -->
              <!-- 定制 鼎兴餐饮 套餐组合 进入详情页面下单，不允许加入购物车 start -->
              <template v-if="!(goods.is_dxcy_gift_bag_dz && goods.dxcy_gift_open)">
              <div class="shop-car" :class="dzNew?'new-shop-car':''" v-if="goods.is_try==1 || goods.is_miao==1 || goods.is_bargin==1 || goods.is_crowd==1 || goods.is_limit_discount==1 || goods.is_group_shopping==1 || goods.is_auction==1 || goods.num<=0"></div>

              <div class="shop-car" :class="dzNew?'new-shop-car':''" v-else  @click.stop="handleOpenSkuDialog(goods)">
                <!-- <svg-icon icon-class="icon_shopCar" /> -->
              </div>
              </template>
              <!-- 定制 鼎兴餐饮 套餐组合 进入详情页面下单，不允许加入购物车 end -->
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="isShowNoData">
      <no-data :noData="noData"></no-data>
    </div>
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
/**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-10-26 18:48:09
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-08-29 15:07:34
	 */
// import vueWaterfallEasy from 'vue-waterfall-easy'
// import vueWaterfallEasy from '@/components/vueWaterfallEasy/vue-waterfall-easy'

import skuDialog from '../../../components/skuDialog'
import { scaleGoodsPrice } from '@/utils/index'
import noData from '@/components/noData/index'
import { mapGetters } from 'vuex'
import Vue from 'vue'
import { Lazyload } from 'vant'
import { openPage } from '@/utils/utils'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import small from '@/smallapp/small.js'
Vue.use(Lazyload)
export default Vue.extend({
  name: 'index',
  components: {
    // vueWaterfallEasy,
    skuDialog,
    noData,
    SmallLogin
  },
  props: {
    itemList: {
      type: Array,
      default: []
    },
    isShowNoData: {
      type: Boolean,
      default: false
    },
    illegal_msg: {
      type: String,
      default: '暂无商品数据'
    },
    listStyle: {
      type: Boolean,
      default: false
    },
    dhsOriginalPriceShow: {
      type: String,
      default: ''
    },
    otherInfo: {
      type: Object,
      default: {
        is_display_original_price: '',
        earn_alias: '',
        is_open_kuajing: '',
        point_name: ''
      }
    },
    // 商品分类页面传过来的值 
    classGoodMini: {
      type: Boolean,
      default: false
    },

    vanList: {
      type: Object,
      default: {
        loading: false,
        error: false,
        finished: false
      }
    },
    dzNew: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      noData: {
        text: '暂无商品数据',
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
        width: '214px',
        marginTop: '60px',
        txtMarginTop: '-30px'
      },
      skuDialogVisible: false,
      itemId: 0,
      loadingDotStyle: {
        background: '#e43',
        display: 'none'
      },
      // p: 2,
      listParams: {
        p: 1,
        type: this.type,
        keyword: ''
      },
      nowTime: 0
    }
  },
  watch: {
    illegal_msg(val) {
      this.noData.text = val
    }
  },
  methods: {
    numFormTime(val) {
      let s = new Date().getTime()
      if (val) {
        s = new Date(val).getTime()
      }
      return s
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    linkTo(url) {
      window.location.href = url
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    /**
       * 滑到底部
       */
    getData() {
      this.$emit('scrollReachBottom')
    },
    // 样式二加载更多
    onLoad() {
      this.$emit('scrollReachBottom')
    },
    // 跳转商品详情页
    linkToDetail(item) {
      // 小程序不支持跳转外链 只支持跳转pages下的页面
      openPage(item.link_item)
    },
    /**
       * 列表卡片点击事件
       */
    handleWatchEvent(event, { index, value }) {
      // 阻止a标签跳转
      event.preventDefault()
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() === 'img') {
        this.linkToDetail(value)
      }
    },
    /**
       * 打开SKU弹窗
       */
    handleOpenSkuDialog(data) {
        // TODO 小程序判断是否登录
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      // TODO 小程序弹窗层级处理
      if (this.classGoodMini) {
        window.$$publish('skuData', {
          itemId: Number(data.item_id)
        })
      } else {
        this.skuDialogVisible = true
        this.itemId = Number(data.item_id)
      }
    }
  },
  created() {
    // console.log(this.otherInfo)
    this.nowTime = new Date().getTime()/1000
  },
  mounted() {
    // console.log(this.mSymbol,'mySybol')
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
  .item-wrapper{
    .vue-waterfall-easy-container{
      overflow: hidden;
      .vue-waterfall-easy a.img-inner-box{
        // box-shadow: 0 1px 6px rgba(228, 226, 226, 0.3) !important;
        overflow:hidden;
        box-shadow:none;
        border-radius: 12px;
        background: #fff;
        border: none;
        width: 100%;
        .alink.img-wraper{
          // width: 100%!important;
        }
      }
    }
    .level-price{
      .level-price-item{
        .price-scale {
          color:#FFB400;
        }
      }
    }
    .level-vip-price{
      .price-scale {
        color: #D1AB78;
      }
    }
    //售罄商品样式
    .item-info{
      &.gray{
        // -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        // filter: grayscale(100%);
        // .item-info-main{
        //   .title{
        //     color:#999;
        //   }
        //   .item-tips{
        //     .item-tips-app{
        //       color:#999;
        //       background:#EDEDED;
        //     }
        //   }
        //   .price-scale {
        //     color:#999;
        //   }
        //   .point{
        //     color:#999;
        //   }
        //   .pre_commission{
        //     color:#999;
        //   }
          .shop-car{
            -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
            filter: grayscale(100%);
          }
        // }
      }
    }
  }
  @import "src/styles/mixin";
  @import "src/styles/variables";
  #item-wrapper {
    padding-bottom: 100px;
  }
  .item-wrapper{
    padding-bottom:100px;
    .style1{
      padding: 10px;
    }
    .item-info{
      .item-sold-out{
        /* display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        position: absolute;
        left: 120px;
        top:100px;
        min-width:120px;
        height:120px;
        font-size:18px;
        color:#fff;
        background:rgba(0,0,0,1);
        opacity:0.5;
        border-radius:50%;
        .em{
          font-size:26px;
        }
        .sub{
          margin-top:2px;
          opacity:0.6;
        } */
        position:absolute;
        width:200px;
        height:50px;
        background:rgba(0,0,0,.5);


        // transform: translate(50%,50%);
        /* width: 103px;
        height: 104px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/item/list/sold_out.png) center no-repeat;
        background-size: 100% auto;
        position: absolute;
        left: 10px;
        top: 10px; */
      }
      .item-timer{
        position: relative;
        // top:-52px;
        margin-top:-50px;
        z-index: 1;
        height: 52px;
        line-height: 52px;
        width: 100%;
        color: #fff;
        text-align: center;
        font-size: 20px;
        @include gradient(right,#FF2A40,#FE3C70);
      }
      &-main{
        padding: 14px 20px 30px;
        // font-size: 0;
        position: relative;
        // font-family: Gilroy-Regular;
        .title{
          font-size: 28px;
          color: #333;
          margin-bottom: 16px;
          @include lineClamp($font-size:24px,$line-height:1.3,$lines-to-show:2)
        }
        .item-tips{
          font-size: 0;
          margin-bottom:6px;
          &-app{
            @include alignTop;
            font-size: 20px;
            line-height: 24px;
            padding: 5px 12px;
            background: #ddd;
            margin-right: 10px;
            margin-bottom: 12px;
            border-radius: 24px;
            @include btnGroup($fontDefault, $bgDefault);
            &.fontZiy{
              color:#fff;
              @include gradient(right,#FF2A40,#FE3C70);
            }
            &.fontTry{
              @include btnGroup($fontTry, $bgTry);
            }
            &.fontBaoY{
              @include btnGroup($fontBaoY, $bgBaoY);
            }
            /* &.fontMiaoS{
              @include btnGroup($fontMiaoS, $bgMiaoS);
            } */
            &.fontZhouQG{
              @include btnGroup($fontZhouQG, $bgZhouQG);
            }
            &.fontXianSZ{
              @include btnGroup($fontXianSZ, $bgXianSZ);
            }
            /* &.fontPingT{
              @include btnGroup($fontPingT, $bgPingT);
            }
            &.fontKanj{
              @include btnGroup($fontKanj, $bgKanj);
            }
            &.fontXianSZ{
              @include btnGroup($fontXianSZ, $bgXianSZ);
            }
            &.fontTuanG{
              @include btnGroup($fontTuanG, $bgTuanG);
            }
            &.fontJiXj{
              @include btnGroup($fontJiXj, $bgJiXj);
            } */
            &.fontFuGYH{
              @include btnGroup($fontFuGYH, $bgFuGYH);
            }
            /* &.fontYuS{
              @include btnGroup($fontYuS, $bgYuS);
            }
            &.fontPaiM{
              @include btnGroup($fontPaiM, $bgPaiM);
            } */
            &.fontXianSG{
              @include btnGroup($fontXianSG, $bgXianSG);
            }
            &.fontXianJiZ{
              @include btnGroup($fontXianJiZ, $bgXianJiZ);
            }
          }
        }
        .level-price{
          display: flex;
          align-items: center;
          margin: 8px 0 6px;
          .level-icon{
            position:relative;
            display: block;
            // width:28px;
            height:30px;
            line-height:30px;
            padding:0 6px;
            // margin-right:4px;
            font-size:20px;
            color:#885A0B;
            @include gradient(right,#FFF289,#FCCD56);
            @for $i from 1 through 5 {
              &.icon#{$i} {
                background-image: url(https://img.wifenxiao.com/h5-wfx/images/item/list/list_price#{$i}.png);
              }
            }
            &::after{
              content:"";
              position:absolute;
              top:6px;
              right:-7px;
              width:0;
              height:0;
              border:8px solid transparent;
              border-right:0;
              border-left-color:#FCCD56;
            }
          }
          .price{
            display: inline-block;
            font-size: 28px;
            color: #FFB400;
            margin-left: 14px;
            vertical-align: 4px;
            /* i{
              display: inline-block;
              transform: scale(0.7);
              vertical-align: -2px;
            } */
          }
          .level-vip-icon {
            color: #D1AB79;
            font-size: 22px;
            font-weight: bold;
            padding-left: 34px;
            padding-right: 10px;
            display: block;
            background-image: url(https://img.wifenxiao.com/h5-wfx/images/item/list/vip-icon.png), linear-gradient(to right, #F4E4CC, #FFF9EF);
            background-repeat: no-repeat;
            background-size: 29px 29px, 100% 100%;
            background-position: center;
            background-position-x: -1px;
            border-color: #D1AB79;
            border-width: 1px;
            border-radius: 29px;
            border-style: solid;
            border-left: none;
            display: inline-block;
          }
        }
        .price-info{
          display:flex;
          align-items:flex-end;
          .left-num{
            flex:1;
            display:flex;
            flex-direction: column;
            flex-wrap:wrap;
            .item{
              margin-top:8px;
              margin-right:8px;
              font-size:22px;
              &.goods-price{
                margin-top:0;
              }
            }
            .other-info{
              display:flex;
              flex-direction: row;
              flex-wrap:wrap;
            }
          }
        }
        .goods-price{
          .price{
            display:inline-block;
            // color:#F30C23;
          }
          .origin-price{
            margin-left:4px;
            font-size:22px;
            color:#999;
          }
          /* &-item{
            display: inline-block;
            .point{
              display: inline-block;
              color: $warning;
              font-size: 30px;
              margin-right: 5px;
              margin-bottom: 10px;
            }
            .price{
              font-size: 24px;
              color: $warning;
              display: inline-block;
              margin-right: 10px;
              .num-front{
                font-size: 32px;
              }
              .num-back{
                font-weight: bold;
              }
            }
            .origin-price{
              display: inline-block;
              width: 160px;
              color: #8b8b8b;
              font-size: 28px;
            }
          } */
        }
        //积分
        .point{
          color:#FFA101;
        }
        //预计佣金
        .pre_commission{
          color:#94734D;
        }
        .sales-info{
          color:#999;
        }
        .shop-car{
          width:56px;
          height:56px;
          background:url(https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png) no-repeat;
          background-size:100%;
        }
        .new-shop-car {
          width:56px;
          height:56px;
          background:url(https://img.wifenxiao.com/h5-wfx/images/DZ/xfl/shopCar.png) no-repeat;
          background-size:100%;
        }
      }
    }
    
    //样式二
    .style2{
      padding:20px 0 100px 0;
      .item-info-style2{
        display:flex;
        background:#fff;
        .img-box{
          overflow:hidden;
          width:240px;
          height:240px;
          padding:20px;
          position: relative;
          .mian-icon {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 50px!important;
            height: 50px!important;
            z-index: 10;
          }
          .img-inner-box{
            width: 100%;
            height: 100%;
            overflow:hidden;
            position:relative;
          }
          img{
            display:block;
            width:100%;
            height:100%;
            border-radius:12px;
          }
          /* .item-sold-out{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
          } */
          .item-sold-bg {
            position:absolute;
            top:0;
            right:0;
            width:100%;
            height:100%;
            background:#fff;
            opacity: 0.4;
          }
          .item-sold-out{
            position:absolute;
            top: 20px;
            left: -46px;
            width:180px;
            height:50px;
            line-height:50px;
            transform:rotate(-45deg);
            font-size:24px;
            text-align:center;
            color:#fff;
            background:#000;
            opacity: 0.5;
          }
        }
        .item-info-main{
          display:flex;
          flex-direction: column;
          justify-content: space-between;
          padding:20px 30px 20px 0;
          flex:1;
          border-bottom:2px solid #EDEDED;
          .title{
            margin-bottom:10px;
          }
          .item-timer{
            height:auto;
            line-height:1;
            margin:0 0 8px;
            text-align:left;
            font-size:20px;
            color:#F30C23;
            background:transparent;
          }
          .left-num{
            // flex-direction: row;
            // align-items:flex-end;
            .other-info{
              .item{
                margin-bottom:3px;
              }
            }
          }
          .price-info {
            position: relative;
            padding-right:56px;
            .shop-car {
              position: absolute;
              right: 0;
              bottom: 38px;
            }
          }
        }
      }
    }
  }
</style>
